.head{
  width: 100%;
  max-width: 500px;
  padding: 8px 120px 8px 0;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  font-weight: 500;
  font-size: 14px;
}

.slider {
  display: flex;
  max-width: 500px;

  .wraper{
    flex: 1;
    height: 40px;
    display: flex;
    position: relative;
    background-color: rgb(243 244 246);
    border-radius: 3px;

    .item{
      display: inline-block;
      flex: 1 12.5%;
      position: relative;
      cursor: pointer;

      &::after{
        content: '';
        display: inline-block;
        width: 1px;
        height: 60%;
        background: #aeaeae;
        position: absolute;
        right: 0;
        top: 8px;
      }

      &:nth-last-child(2){
        &::after{
          display: none;
        }
      }
    }

    .block{
      height: 40px;
      background-color: rgb(75 85 220);
      transform: translateX(0%);
      width: 11.1111%;
      position: absolute;
      left: 0;
      will-change: transform;
      transition: transform 0.2s ease 0s, opacity 0.2s ease 0s;
      cursor: pointer;

      &::after{
        content: '';
        display: inline-block;
        width: 3px;
        height: 100%;
        background: rgb(75 85 220);
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
        background-color: rgb(75 85 220);
        position: absolute;
        left: -2px;
      }

      &::before{
        content: '';
        display: inline-block;
        width: 3px;
        height: 100%;
        background: rgb(75 85 220);
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
        background-color: rgb(75 85 220);
        position: absolute;
        right: -2px;
      }
    }
  }

  .buttons{
    margin-left: 10px;

    button {
      padding: 10px;

      // background-color:rgb(243 ,244, 246); ;
      border: 2px solid rgb(243 244 246);
      border-radius: 3px;
      width: 40px;
      margin: 0 4px;
      box-sizing: border-box;
      cursor: pointer;
    }
  }
}
